<template>

  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <ReportList
          :date="paramsDate"
          @exportExcel="exportExcel"

          @newReport="newReport"
          @guiDang="guiDang"
        >
          <template #table>
            <el-table
              :data="tabelList"
              border
              style="width: 100%"
            >
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="workNumber" label="工号" width="100" />
              <el-table-column prop="mobile" label="手机号" width="200" />
              <el-table-column prop="department" label="部门" width="200" />
              <el-table-column prop="leaveDays" label="事假" width="100" />
              <el-table-column prop="dayOffLeaveDays" label="调休" width="100" />
              <el-table-column prop="normalDays" label="正常" width="100" />
              <el-table-column prop="laterTimes" label="迟到次数" width="100" />
              <el-table-column prop="earlyTimes" label="早退次数" width="100" />
              <el-table-column prop="averageDailyNaturalDays" label="日均时长" width="150" />
              <el-table-column prop="absenceDays" label="旷工天数" width="100" />
              <el-table-column prop="whetherItIsFullOfWork" label="是否全勤" width="100" />
              <el-table-column prop="actualAttendanceDaysAreOfficial" label="实际出勤天数" width="180" />
              <el-table-column prop="attendanceDay" label="应出勤工作日" width="120" />
              <el-table-column prop="salaryStandard" label="计薪标准" width="100" />
              <el-table-column prop="officialSalaryDays" label="计薪天数" width="150" />
            </el-table>
          </template>
        </ReportList>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getReport, setArchives, setNewArchives } from '@/api/attendance'
export default {
  filters: {
    date(val) {
      return val.substr(0, 6)
    }
  },
  data() {
    return {
      paramsDate: this.$route.params.atteDate.substr(0, 6),
      tabelList: []
    }
  },
  mounted() {
    this.getReport()
  },
  methods: {
    async getReport() {
      this.tabelList = await getReport({ atteDate: this.paramsDate })
    },
    async exportExcel() {
      // this.$message('导出')
      // 这里是按钮被点击, 可以就在这里单独引入需要的库
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      console.log(export_json_to_excel)

      // 加载所有员工
      const res = await getReport({ atteDate: this.paramsDate })
      console.log(res)

      const tHeader = ['姓名', '工号', '手机号', '部门', '事假', '调休', '正常', '迟到次数', '早退次数', '日均时长', '旷工天数', '是否全勤', '实际出勤天数', '应出勤工作日', '计薪标准', '计薪天数'] // 表头 必填

      const filterVal = ['name', 'workNumber', 'mobile', 'department', 'leaveDays', 'dayOffLeaveDays', 'normalDays', 'laterTimes', 'earlyTimes', 'averageDailyNaturalDays', 'absenceDays', 'whetherItIsFullOfWork', 'actualAttendanceDaysAreOfficial', 'attendanceDay', 'salaryStandard', 'officialSalaryDays']
      const dict = {}
      tHeader.forEach((item, index) => {
        filterVal.forEach((item1, index1) => {
          if (index === index1) {
            dict[item] = item1
          }
        })
      })
      console.log(dict)

      const userData = res.map(user => {
        return this.object2Arrayy(user, dict)
      })

      console.log(userData)
      export_json_to_excel({
        header: Object.keys(dict),
        data: userData
      })
    },
    object2Arrayy(user, dict) {
      const newUser = []
      for (const key in dict) {
        const enKey = dict[key]
        const value = user[enKey]
        newUser.push(value)
      }
      return newUser
    },
    async guiDang() {
      try {
        await this.$confirm('你确定归档当月报表吗', '归档' + this.paramsDate + '报表', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        await setArchives({ atteDate: this.paramsDate })
        this.$message.success('归档成功')
      } catch (err) {
        console.log(err)
      }
    },
    async newReport() {
      try {
        await this.$confirm('你确定新建报表吗？新建成功后，已归档数据不可修改', '新建' + (parseInt(this.paramsDate) + 1) + '报表', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        await setNewArchives({ atteDate: this.paramsDate, yearMonth: (parseInt(this.paramsDate) + 1) })
        this.$message.success('新建成功')
        this.$router.push('/attendances')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>

</style>
